﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head> 
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
 <title>WMA Grpah</title>

  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
  <style>
  	body,h1,h2,h3,h4,h5,h6,p,ul,ol,dl,input,textarea { font-family: 'Lucida Grande', Tahoma, Verdana, sans-serif; }  
  </style>
  
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
  <script src="http://code.highcharts.com/highcharts.js"></script>
  <script src="http://code.highcharts.com/modules/exporting.js"></script>
  
   <script type="text/javascript">
	var chart;
	var name1='';
	$(document).ready(function () {
    
	//http://jsfiddle.net/NULTY/456/ <--check psudo code
	Highcharts.setOptions({
     colors: ['#463E3F', '#504A4B', '#848482', '#3EA055', '#4CC417', '#7FE817', '#8AFB17','#F70D1A','#FF0000', '#E55451', '#E77471','#E78A61','#157DEC','#1589FF','#6495ED','#6495ED','#3BB9FF','#82CAFA']
    }); 
       
		var colors = Highcharts.getOptions().colors,
			categories = [  'ภาค1 สสป.','ภาค1สสพ.','ภาค1 สสส.','ภาค2 สสญ.','ภาค2 สสท.','ภาค2 สสม.','ภาค2 สสล.','ภาค3 สสข.','ภาค3 สสช.','ภาค3 สสน.','ภาค3 สสมบ.','ภาค3 สสสภ.','ภาค4 สสต.','ภาค4 สสบ.','ภาค4 สสบท.','ภาค4 สสภ.','ภาค4 สสมส.','ภาค4 สสว.'],
			name = 'สาขา',
			level = 0,
			data = [{ y:1565, color: colors[0], drilldown: { name: 'ภาค1 สสป.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09','zone10','zone11'], level: 1, data: [{ y: 168, drilldown: { level: 2, name: 'zone01', categories: ['DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [23,29,16,13,11,18,19,17,12,10], color: colors[0] } },{ y: 28, drilldown: { level: 2, name: 'zone02', categories: ['DMA02'], data: [28], color: colors[0] } },{ y: 156, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [30,14,15,18,25,12,42], color: colors[0] } },{ y: 186, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [7,31,34,24,54,36], color: colors[0] } },{ y: 129, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [25,18,3,39,28,16], color: colors[0] } },{ y: 197, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [32,32,25,23,33,15,19,18], color: colors[0] } },{ y: 267, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [34,14,7,29,12,42,31,17,50,31], color: colors[0] } },{ y: 111, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [40,12,31,28], color: colors[0] } },{ y: 117, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [12,14,25,13,6,8,39], color: colors[0] } },{ y: 84, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [3,18,10,28,21,4], color: colors[0] } },{ y: 122, drilldown: { level: 2, name: 'zone11', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [15,39,34,5,16,13], color: colors[0] } }], color: colors[0] } },{ y:2239, color: colors[1], drilldown: { name: 'ภาค1สสพ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 426, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [36,52,58,131,136,13], color: colors[1] } },{ y: 310, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [18,40,49,71,39,40,40,13], color: colors[1] } },{ y: 280, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [42,46,34,49,87,22], color: colors[1] } },{ y: 428, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [42,44,34,52,59,32,39,46,80], color: colors[1] } },{ y: 407, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [39,43,25,78,24,46,20,57,75], color: colors[1] } },{ y: 145, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA04','DMA05'], data: [48,35,29,33], color: colors[1] } },{ y: 243, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [38,19,16,40,41,32,57], color: colors[1] } }], color: colors[1] } },{ y:1984, color: colors[2], drilldown: { name: 'ภาค1 สสส.', categories: ['zone01','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 460, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [21,22,6,36,33,65,45,43,86,23,80], color: colors[2] } },{ y: 40, drilldown: { level: 2, name: 'zone03', categories: ['DMA11','DMA12','DMA13','DMA14'], data: [4,5,12,19], color: colors[2] } },{ y: 414, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15','DMA16','DMA18','DMA19'], data: [36,22,59,20,21,19,7,19,8,13,26,24,25,16,35,32,5,27], color: colors[2] } },{ y: 369, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15'], data: [15,8,17,16,21,21,19,16,31,42,56,84,9,2,12], color: colors[2] } },{ y: 312, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [44,40,94,28,11,1,26,16,18,11,23], color: colors[2] } },{ y: 389, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [35,52,30,43,52,66,80,10,9,3,9], color: colors[2] } }], color: colors[2] } },{ y:1505, color: colors[3], drilldown: { name: 'ภาค2 สสญ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 245, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [18,18,35,38,34,31,24,24,23], color: colors[3] } },{ y: 206, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [20,12,14,31,30,10,42,21,26], color: colors[3] } },{ y: 371, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13'], data: [18,29,36,20,21,33,12,28,15,25,41,37,56], color: colors[3] } },{ y: 177, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [19,19,38,24,17,14,24,22], color: colors[3] } },{ y: 281, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [20,36,20,26,20,24,29,12,20,29,14,31], color: colors[3] } },{ y: 225, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13'], data: [19,28,33,32,16,22,7,14,25,5,3,8,13], color: colors[3] } }], color: colors[3] } },{ y:1167, color: colors[4], drilldown: { name: 'ภาค2 สสท.', categories: ['zone01','zone02','zone03','zone04','zone05'], level: 1, data: [{ y: 212, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [44,22,24,21,11,8,9,44,29], color: colors[4] } },{ y: 179, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [8,39,41,25,19,17,17,13], color: colors[4] } },{ y: 209, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [30,31,86,22,16,24], color: colors[4] } },{ y: 236, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [11,22,18,19,13,40,45,8,3,52,5], color: colors[4] } },{ y: 331, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [35,53,6,27,17,16,26,30,44,8,5,47,11,6], color: colors[4] } }], color: colors[4] } },{ y:1594, color: colors[5], drilldown: { name: 'ภาค2 สสม.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06'], level: 1, data: [{ y: 218, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [16,28,55,52,52,15], color: colors[5] } },{ y: 228, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [27,35,54,26,17,28,41], color: colors[5] } },{ y: 245, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [12,41,55,34,15,31,14,43], color: colors[5] } },{ y: 321, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [37,10,16,64,66,39,22,67], color: colors[5] } },{ y: 325, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [20,18,77,11,62,13,32,23,41,28], color: colors[5] } },{ y: 257, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [19,9,21,15,36,35,25,37,40,8,3,9], color: colors[5] } }], color: colors[5] } },{ y:1721, color: colors[6], drilldown: { name: 'ภาค2 สสล.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07'], level: 1, data: [{ y: 186, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [26,32,15,18,37,16,17,25], color: colors[6] } },{ y: 201, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [18,25,23,20,12,26,46,31], color: colors[6] } },{ y: 262, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [50,22,22,38,18,12,9,34,19,10,28], color: colors[6] } },{ y: 324, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [38,56,29,32,63,52,22,15,17], color: colors[6] } },{ y: 283, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [31,20,21,14,55,24,24,36,21,37], color: colors[6] } },{ y: 216, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [32,53,19,16,13,12,21,10,22,18], color: colors[6] } },{ y: 249, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [21,36,50,32,34,39,20,17], color: colors[6] } }], color: colors[6] } },{ y:1539, color: colors[7], drilldown: { name: 'ภาค3 สสข.', categories: ['zone02','zone03','zone04','zone05','zone06','zone07','zone08'], level: 1, data: [{ y: 225, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [26,32,45,63,59], color: colors[7] } },{ y: 252, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA04','DMA05'], data: [50,73,65,64], color: colors[7] } },{ y: 206, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [41,64,68,33], color: colors[7] } },{ y: 213, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [24,56,86,47], color: colors[7] } },{ y: 169, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [38,33,25,21,52], color: colors[7] } },{ y: 310, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [69,40,44,21,34,26,47,29], color: colors[7] } },{ y: 164, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [40,42,10,72], color: colors[7] } }], color: colors[7] } },{ y:1517, color: colors[8], drilldown: { name: 'ภาค3 สสช.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 139, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [7,28,18,32,18,17,19], color: colors[8] } },{ y: 130, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [28,15,30,23,14,20], color: colors[8] } },{ y: 186, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [41,28,26,32,25,34], color: colors[8] } },{ y: 94, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [20,24,14,15,21], color: colors[8] } },{ y: 172, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [11,30,37,27,1,15,19,10,22], color: colors[8] } },{ y: 170, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [30,58,67,15], color: colors[8] } },{ y: 212, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [29,46,34,39,19,45], color: colors[8] } },{ y: 196, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [17,27,42,47,32,31], color: colors[8] } },{ y: 218, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [44,51,25,7,46,21,24], color: colors[8] } }], color: colors[8] } },{ y:1237, color: colors[9], drilldown: { name: 'ภาค3 สสน.', categories: ['zone03','zone05','zone06','zone08','zone09'], level: 1, data: [{ y: 187, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [19,7,12,14,18,15,16,27,17,11,25,6], color: colors[9] } },{ y: 243, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [18,16,8,39,13,27,1,17,11,24,8,10,14,37], color: colors[9] } },{ y: 239, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14'], data: [7,28,13,15,18,14,23,23,33,12,18,19,12,4], color: colors[9] } },{ y: 236, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [25,48,25,14,26,14,24,14,19,27], color: colors[9] } },{ y: 332, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15'], data: [26,48,27,17,11,17,15,13,12,25,14,23,47,19,18], color: colors[9] } }], color: colors[9] } },{ y:1726, color: colors[10], drilldown: { name: 'ภาค3 สสมบ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone08','zone09'], level: 1, data: [{ y: 321, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [109,39,23,47,80,23], color: colors[10] } },{ y: 266, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [31,31,73,76,36,19], color: colors[10] } },{ y: 274, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [57,47,48,122], color: colors[10] } },{ y: 172, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02'], data: [61,111], color: colors[10] } },{ y: 316, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [85,19,73,29,12,9,89], color: colors[10] } },{ y: 177, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [38,35,8,40,39,17], color: colors[10] } },{ y: 88, drilldown: { level: 2, name: 'zone08', categories: ['DMA01'], data: [88], color: colors[10] } },{ y: 112, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA05'], data: [25,28,15,44], color: colors[10] } }], color: colors[10] } },{ y:1218, color: colors[11], drilldown: { name: 'ภาค3 สสสภ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 56, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03'], data: [11,31,14], color: colors[11] } },{ y: 95, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03'], data: [29,31,35], color: colors[11] } },{ y: 117, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [37,28,24,28], color: colors[11] } },{ y: 178, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [49,46,43,28,12], color: colors[11] } },{ y: 147, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [27,39,44,36,1], color: colors[11] } },{ y: 138, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [9,5,17,27,18,45,17], color: colors[11] } },{ y: 260, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [48,18,17,53,29,52,43], color: colors[11] } },{ y: 140, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03'], data: [49,75,16], color: colors[11] } },{ y: 87, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02'], data: [11,76], color: colors[11] } }], color: colors[11] } },{ y:1840, color: colors[12], drilldown: { name: 'ภาค4 สสต.', categories: ['zone01','zone02','zone03','zone04','zone08','zone12','zone13','zone14','zone15','zone16'], level: 1, data: [{ y: 166, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA07'], data: [45,23,47,34,17], color: colors[12] } },{ y: 183, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [41,21,20,27,16,28,13,17], color: colors[12] } },{ y: 118, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [7,19,23,18,19,32], color: colors[12] } },{ y: 157, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [26,52,43,36], color: colors[12] } },{ y: 260, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [41,48,78,93], color: colors[12] } },{ y: 136, drilldown: { level: 2, name: 'zone12', categories: ['DMA01','DMA02','DMA03'], data: [81,23,32], color: colors[12] } },{ y: 167, drilldown: { level: 2, name: 'zone13', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [27,24,32,20,34,30], color: colors[12] } },{ y: 400, drilldown: { level: 2, name: 'zone14', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [47,31,59,41,40,36,85,21,40], color: colors[12] } },{ y: 97, drilldown: { level: 2, name: 'zone15', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [22,20,24,12,19], color: colors[12] } },{ y: 156, drilldown: { level: 2, name: 'zone16', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08'], data: [8,23,24,10,11,21,28,31], color: colors[12] } }], color: colors[12] } },{ y:1669, color: colors[13], drilldown: { name: 'ภาค4 สสบ.', categories: ['zone01','zone02','zone03','zone04','zone05','zone06','zone07','zone08','zone09'], level: 1, data: [{ y: 151, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [12,29,29,25,36,20], color: colors[13] } },{ y: 124, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [30,42,11,27,14], color: colors[13] } },{ y: 187, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [12,17,27,33,67,31], color: colors[13] } },{ y: 219, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [26,29,65,16,53,11,19], color: colors[13] } },{ y: 146, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [49,19,41,37], color: colors[13] } },{ y: 203, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [34,56,34,47,32], color: colors[13] } },{ y: 237, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [26,43,78,90], color: colors[13] } },{ y: 195, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04'], data: [63,53,49,30], color: colors[13] } },{ y: 207, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [29,19,16,25,13,13,27,31,19,15], color: colors[13] } }], color: colors[13] } },{ y:1008, color: colors[14], drilldown: { name: 'ภาค4 สสบท.', categories: ['zone01','zone02','zone04','zone05','zone07','zone08','zone09'], level: 1, data: [{ y: 154, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [6,12,18,11,49,58], color: colors[14] } },{ y: 213, drilldown: { level: 2, name: 'zone02', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [34,23,21,88,47], color: colors[14] } },{ y: 174, drilldown: { level: 2, name: 'zone04', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [32,47,12,22,34,27], color: colors[14] } },{ y: 42, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03'], data: [12,11,19], color: colors[14] } },{ y: 59, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05'], data: [13,13,12,4,17], color: colors[14] } },{ y: 166, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [22,33,31,5,11,15,7,7,35], color: colors[14] } },{ y: 200, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [40,52,22,7,19,6,54], color: colors[14] } }], color: colors[14] } },{ y:1529, color: colors[15], drilldown: { name: 'ภาค4 สสภ.', categories: ['zone03','zone05','zone06','zone07','zone08','zone10'], level: 1, data: [{ y: 233, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [13,26,23,13,29,17,27,33,24,15,13], color: colors[15] } },{ y: 156, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [26,31,22,16,28,33], color: colors[15] } },{ y: 242, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09'], data: [38,25,22,29,9,14,19,27,59], color: colors[15] } },{ y: 325, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11'], data: [41,27,38,24,21,18,20,23,29,49,35], color: colors[15] } },{ y: 246, drilldown: { level: 2, name: 'zone08', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10'], data: [14,26,29,25,16,34,16,18,42,26], color: colors[15] } },{ y: 327, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12','DMA13','DMA14','DMA15','DMA16'], data: [26,12,16,18,26,32,29,14,12,15,22,22,26,15,21,21], color: colors[15] } }], color: colors[15] } },{ y:943, color: colors[16], drilldown: { name: 'ภาค4 สสมส.', categories: ['zone01','zone03','zone06','zone09','zone11','zone13','zone16'], level: 1, data: [{ y: 143, drilldown: { level: 2, name: 'zone01', categories: ['DMA01','DMA02','DMA03','DMA04','DMA10'], data: [37,29,29,16,32], color: colors[16] } },{ y: 126, drilldown: { level: 2, name: 'zone03', categories: ['DMA01','DMA02'], data: [98,28], color: colors[16] } },{ y: 114, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [24,23,20,18,12,17], color: colors[16] } },{ y: 163, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02'], data: [66,97], color: colors[16] } },{ y: 146, drilldown: { level: 2, name: 'zone11', categories: ['DMA05','DMA06','DMA07','DMA08','DMA09'], data: [55,17,13,18,43], color: colors[16] } },{ y: 137, drilldown: { level: 2, name: 'zone13', categories: ['DMA03','DMA04','DMA05','DMA06'], data: [88,22,14,13], color: colors[16] } },{ y: 114, drilldown: { level: 2, name: 'zone16', categories: ['DMA07','DMA08','DMA09'], data: [43,35,36], color: colors[16] } }], color: colors[16] } },{ y:1357, color: colors[17], drilldown: { name: 'ภาค4 สสว.', categories: ['zone05','zone06','zone07','zone09','zone10','zone11','zone17','zone18'], level: 1, data: [{ y: 239, drilldown: { level: 2, name: 'zone05', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [55,33,21,17,30,39,44], color: colors[17] } },{ y: 123, drilldown: { level: 2, name: 'zone06', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [18,32,14,19,22,18], color: colors[17] } },{ y: 125, drilldown: { level: 2, name: 'zone07', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [14,16,32,17,13,16,17], color: colors[17] } },{ y: 114, drilldown: { level: 2, name: 'zone09', categories: ['DMA01','DMA02','DMA03'], data: [37,57,20], color: colors[17] } },{ y: 133, drilldown: { level: 2, name: 'zone10', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [15,10,22,26,27,22,11], color: colors[17] } },{ y: 220, drilldown: { level: 2, name: 'zone11', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07','DMA08','DMA09','DMA10','DMA11','DMA12'], data: [21,21,19,12,13,20,29,29,16,5,18,17], color: colors[17] } },{ y: 209, drilldown: { level: 2, name: 'zone17', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06','DMA07'], data: [51,25,29,39,17,46,2], color: colors[17] } },{ y: 194, drilldown: { level: 2, name: 'zone18', categories: ['DMA01','DMA02','DMA03','DMA04','DMA05','DMA06'], data: [20,30,31,47,22,44], color: colors[17] } }], color: colors[17] } } ];
			
	   
		function setChart(name, categories, data, color, level) {
			chart.xAxis[0].setCategories(categories);
			chart.series[0].remove();
		   
		   
			chart.addSeries({
				name: name,
				data: data,
				level: level,
				color: color || 'white'
			});
		}
	   
		chart = new Highcharts.Chart({
			chart: {
				renderTo: 'container', 
				type: 'column'
			},
			title: {
				text: 'จำนวนหัวดับเพลิงของการประปานครหลวง'
			},
			subtitle: {
				text: 'จำนวนหัวดับเพลิงของการประปานครหลวงรวมทุกสาขา'
			},
			xAxis: {
				categories: categories                     
			},
			yAxis: {
				title: {
					text: 'จำนวนหัวดับเพลิง'
				}
			},
			plotOptions: {
				column: {
					cursor: 'pointer',
					point: {
						events: {
							click: function() {

								var drilldown = this.drilldown;
								if (drilldown) { // drill down
								
								this.series.chart.setTitle({
									    text: 'จำนวนหัวดับเพลิงของการประปานครหลวง'
									 }, {
										text:  'จำนวนหัวดับเพลิงของการประปานครหลวงภายใน ' +name1 +' '+drilldown.name
										});
									//console.log(drilldown);
									name1 = drilldown.name;
								
									setChart(drilldown.name, drilldown.categories, drilldown.data, drilldown.color, drilldown.level);
								} else { // restore
									name1 = '';
									chart.setTitle({
									    text: 'จำนวนหัวดับเพลิงของการประปานครหลวง'
									 }, {
										text: 'จำนวนหัวดับเพลิงของการประปานครหลวงรวมทุกสาขา'
										});
									setChart(name, categories, data, null,level);
								}
							}
						}
					},
					dataLabels: {
						enabled: true,
						color: colors[0],
						style: {
							fontWeight: 'bold'
						},
						formatter: function() {
							return this.y +'ตัว';
						}
					}               
				}
			},
			tooltip: {
				formatter: function() {
					/*var point = this.point, s = '';
					
					 switch (this.series.options.level) {
						case 0:
							s = 'row 1 level 1 instructions<br/>';
							s += ' row 2 level 1 instructions';
							break;
						
						case 1:
							s = 'row 1 level 2 instructions <br/>';
							s += ' row 2 level 2 instructions';
							break;
						
						case 2:
							s = 'row 1 level 3 instructions<br/>';
							s += 'row 2 level 3 instructions';
							break;
					}*/
						var point = this.point,
							s = this.x +'มีหัวดับเพลิงทั้งหมด จำนวน: <b>'+ this.y +'ตัว</b><br/>';
						if (point.drilldown) {
							s += 'คลิ๊กเพื่อดูรายละเอียดของข้อมูลใน '+ point.category;
						} else {
							s += 'คลิ๊กเพื่อกลับไปดูข้อมูลรายสาขา';
						}
			 
				 
					return s;
				}
			},
			series: [{
				name: name,
				level: level,
				data: data,
				color: 'white'
			}],
			exporting: {
				enabled: false
			}
		});
	   
	   
	});
    
	</script>
  
</head>
<body>

<div id="container" style="height: 400px;"></div>

</body>
</html>